﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0030)http://localhost:8080/House-2/ -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>云和租房 - 首页</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<LINK rel=stylesheet type=text/css href="../css/style.css">
<META name=GENERATOR content="MSHTML 8.00.7601.17514"></HEAD>
<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
<BODY>
<DIV id=header class=wrap>
  <DIV id=logo><IMG src="../images/logo.gif"></DIV></DIV>
<DIV id=navbar class=wrap>
<DL class="search clearfix">
  <FORM id=sform method=post action=search.action>
  <DT>
  <UL>
    <LI class=bold>房屋信息</LI>
    <LI>标题：<INPUT class=text type=text name=title id="keyword" placeholder="请输入关键字"> <LABEL class=ui-blue><INPUT onclick=doSearch() value=搜索房屋 type=button name=search id="search"></LABEL>
    </LI></UL></DT>
  <DD>
  <UL>
    <LI class=first>价格 </LI>
    <LI><SELECT name=price> <OPTION selected value="">不限</OPTION> <OPTION 
    value=0-100>100元以下</OPTION> <OPTION value=100-200>100元—200元</OPTION>
      <OPTION value=200-1000000>200元以上</OPTION></SELECT> </LI></UL></DD>
  <DD>
  <UL>
    <LI class=first>房屋位置</LI>
    <LI><SELECT id=street name=street> <OPTION selected
      value="">不限</OPTION> <OPTION value=1000>知春路</OPTION> <OPTION 
      value=1001>中关村大街</OPTION> <OPTION value=1002>学院路</OPTION> <OPTION 
      value=1003>朝阳路</OPTION></SELECT> </LI></UL></DD>
  <DD>
  <UL>
    <LI class=first>房型</LI>
    <LI><SELECT name=type> <OPTION selected value="">不限</OPTION> <OPTION
      value=1000>一室一厅</OPTION> <OPTION value=1001>一室两厅</OPTION> <OPTION 
      value=1002>两室一厅</OPTION> <OPTION value=1003>两室两厅</OPTION></SELECT> 
  </LI></UL></DD>
  <DD>
  <UL>
    <LI class=first>面积 </LI>
    <LI><SELECT name=floorage> <OPTION selected value="">不限</OPTION> <OPTION 
      value=0-40>40以下</OPTION> <OPTION value=40-500>40-500</OPTION> <OPTION 
      value=500-1000000>500以上</OPTION></SELECT> </LI></UL></DD></FORM></DL></DIV>
<DIV class="main wrap">
<TABLE class=house-list>
  <TBODY id="tbody">

    <TR>无租房信息</TR></TBODY></TABLE>



  <DIV class=pager>
    <a href="javascript:void(0)" class="fanye" id="first">首页</a>
    <a href="javascript:void(0)" class="fanye" id="prev">上一页</a>
    <a href="javascript:void(0)" class="fanye" id="next">下一页</a>
    <a href="javascript:void(0)" class="fanye" id="last">尾页</a><SPAN
          class=total></SPAN> </DIV></DIV>
<DIV id=footer class=wrap>
  <DL>
    <DT>云和租房 © 2010 云和 京ICP证1000001号</DT>
    <DD>关于我们 · 联系方式 · 意见反馈 · 帮助中心</DD></DL></DIV></BODY></HTML>
<script>
    var currPage;
    var allPages;
    $(function () {
        var getHouseList = function (curr) {
            $.ajax({
                type:"POST",
                url:"search",
                data: {
                    pageIndex: curr || 1,
                    title: $("#keyword").val()

                },
                dataType:"json",
                success:function (data) {
                    $("#tbody").find(".rows").remove();
                    $.each(data.houseList,function (idx,obj) {
                        //href跳转页面时 可以携带参数 如id = obj.id 这样就可以在跳转之后的 页面根据id查询数据 然后把取出来的数据展示出来
                        var $tr = $("<TR class='rows'><TD class=house-thumb><span><A href=\"thishouse?id="+obj.id+"\" target=\"_blank\">"+"<img src=\"../images/thumb_house.gif\" width='100' height='75' alt=''/></a></span></td>" +
                            "<td><dl><dt>"+"<a href='details.htm?id='"+obj.dname+ "target='_blank'>"+obj.title+"</a></dt>" +
                            "<dd>"+obj.sname+obj.dname+","+obj.floorage+"平米<br/>联系方式："+obj.contact+"</dd></dl></td>" +
                            "<td class='house-type'>"+obj.tname+"</td>" +
                            "<td class='house-price'><span>"+obj.price+"元/月</span></td></tr>");
                        $("#tbody").append($tr);
                    })
                    currPage = data.pageIndex;
                    allPages = data.totalPages;
                }
            });
        }
        $(".fanye").on("click",function(){
            var $flag = $(this).attr("id");
            if ($flag == "prev") {
                currPage--;
                getHouseList(currPage);
            } else if ($flag == "next") {
                currPage++;
                if (currPage > allPages) {
                    currPage = allPages;
                }
                getHouseList(currPage);
            } else if ($flag == "first") {
                getHouseList();
            } else {
                getHouseList(allPages);
            }
        });
        $("#search").on("click",function () {
            getHouseList();
        })
        getHouseList();
    });
</script>